<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center" style="padding: 20px;">
          <a-form-model :model="form" :rules="rules" ref="form">
              <a-row :gutter="24">
                  <a-col :span="12">
                      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.appName','应用名称')">
                          <a-input  :disabled="true"  :value="$i18(record.clientName)" />
                      </a-form-model-item>
                  </a-col>
                  <a-col :span="12" >
                      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.appCode','应用编码')">
                        <a-input  :disabled="true" v-model="record.clientCode" />
                      </a-form-model-item>
                  </a-col>
              </a-row>
              <a-row :gutter="24">
                  <a-col :span="12">
                      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.newAppName','新应用名称')" prop="newAppName">
                          <rx-input-i18n :isDecorator="true" @blur="getPinyin" v-model="form.newAppName" />
                      </a-form-model-item>
                  </a-col>
                  <a-col :span="12" >
                      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.newAppCode','新应用编码')" prop="newAppCode">
                          <a-input v-model="form.newAppCode" />
                      </a-form-model-item>
                  </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.newPrefix','应用前缀')" prop="newPrefix">
                      <a-input v-model="form.newPrefix" :placeholder="i18n('form.validPrefixTip','请输入以字母开头最多3位的前缀')"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.dataSource','数据源')">
                    <rx-input-button style="width: 100%;margin-top: 6px;" v-model="form.dataSource" @click="openDataSource"></rx-input-button>
                  </a-form-model-item>
                </a-col>
              </a-row>
          </a-form-model>
          <div style="color:red;">
              {{i18n('msa.attention','注意：选择数据源后，应用内业务实体除库表反射之外会将数据源改为此选择的数据源，生成的表也会到此数据源中')}}
          </div>
      </div>
    </rx-layout>
  </rx-dialog>
</template>

<script>
  import { RxDialog, Util, RxLayout,RxInputI18n,RxInputButton,Dialog,JsConstant } from "@lowcode/jpaas-common-lib";
  import SysAppApi from "@/api/system/core/sysApp";
  import AppName from "@/assets/js/AppName.js";
  export default {
    name: "sys-app-copy",
    mixins:[AppName],
    components: {
      RxDialog,
      RxLayout,
      RxInputI18n,
      RxInputButton
    },
    props: {
      layerid: String,
      destroy: Function,
      record: Object
    },
    data(){
      return{
          rules:{
              newAppName: [
                  { required: true, message: this.i18n('form.newAppNameTip','请填写新的应用名') , trigger: 'blur' },
              ],
              newAppCode: [
                  { required: true, message: this.i18n('form.newAppCodeTip','请填写新的新应用编码')  , trigger: 'blur' },
              ],
              newPrefix: [
                  { required: true, message: this.i18n('form.newPrefixTip','请填写新的新应用前缀'), trigger: 'blur' },
                  {pattern: /^[A-Za-z]{1}[A-Za-z0-9_]{0,2}$/im,message: this.i18n('form.validPrefixTip','请输入以字母开头最多3位的前缀') ,trigger: 'blur'}
              ],
          },
          form:{
              newAppName:"",
              newAppCode:"",
              newPrefix:"",
              dataSource:""
          },
          labelCol:{span:6},
          wrapperCol:{span:18}
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"SysApp",key);
      },
      openDataSource(vm) {
        Dialog.openDataSourceDialog({
          curVm: this, widthHeight: ['1200px', '600px'],
          data: {appName: this.serviceName}
        }, function (self, data) {
          vm.setVal(data.alias, data.name);
        })
      },
      handleSubmit(vm) {
          let self_=this;
          this.$refs.form.validate(valid => {
              if (valid) {
                  let obj={
                      oldPkId:self_.record.pkId
                  };
                  Object.assign(obj,self_.form);
                  Util.closeWindow(self_, "ok",obj);
              } else {
                  vm.loading=false;
                  return false;
              }
          });
      },
      cancel() {
        Util.closeWindow(this, "cancel");
      },
      getPinyin(){
        //如果已有编码则不生成
        if (!this.newAppName || this.newAppCode) return;
        var self=this;
        SysAppApi.getPinyin(this.newAppName).then(res => {
          //去除不可见的特殊符号
          if(res){
            res=res.replace(/\u200B/g,'');
          }
          self.newAppCode=res;
        })
      }
    },

  }
</script>

<style scoped>

</style>